<template>
  <view class="body">
    <view class="status">
      <view class="icon">
        <u-icon
          :name="isCancel ? 'checkbox-mark' : 'close'"
          color="#262626"
          size="28"
        ></u-icon>
      </view>
      <view class="text">{{ isCancel ? "已送达" : "已取消" }}</view>
    </view>
    <view class="room_c">
      <view class="room">
        <text>订单配送</text>
        <text>#{{ content.order_no.slice(-4) }}</text>
      </view>
      <view class="mook">
        <view style="display: flex; align-items: center">
          <view class="qu"> 取 </view>
          <view class="mook_title">
            {{ content.store_name }}
          </view>
        </view>
        <view class="dingwei" @click="toStoreLocation">
          <text class="iconfont icon-map-filling1"></text>
        </view>
      </view>
      <view class="user_ad">
        <view class="juli">
          <text>{{ content.distance }}</text>
          <!-- <text style="font-size: 20rpx; font-weight: 400">km</text> -->
        </view>
        <view class="user_detail_ad" style="width: 496rpx">
          {{ content.store_address }}
        </view>
      </view>
      <view class="mook">
        <view style="display: flex; align-items: center">
          <view class="qu" style="background: #01ab5b">送</view>
          <view class="mook_title">
            {{ content.address }}
          </view>
        </view>
        <view class="dingwei" @click="toUserLocation">
          <text class="iconfont icon-map-filling1"></text>
        </view>
        <!-- <view class="dingwei">
          <text class="iconfont icon-map-filling1"></text>
        </view> -->
      </view>
    </view>

    <view class="order_msg">
      <view class="msg_title"> 商品清单 </view>
      <view
        class="msg_item"
        v-for="(item, index) in content.goods_list"
        :key="index"
      >
        <text class="item_left">
          {{ item.name }}
        </text>
        <text class="item_right"> x{{ item.num }} </text>
      </view>
      <!-- <view class="msg_item">
        <text class="item_left">
          {{ content.shop_content.content_name }}
        </text>
        <text class="item_right">
          x{{ content.shop_content.content_num }}
        </text>
      </view> -->
    </view>
    <view class="order_msg">
      <view class="msg_title"> 订单信息 </view>
      <view class="msg_item">
        <text class="item_left"> 订单号码 </text>
        <text class="item_right"> {{ content.order_no }} </text>
      </view>
      <view class="msg_item">
        <text class="item_left"> 期望送达 </text>
        <text class="item_right">
          {{
            content.delivery_time == 0
              ? getDate(content.pay_time * 1000 + default_time * 60 * 1000)
              : getDate(content.delivery_time * 1000)
          }}
        </text>
      </view>
    </view>
    <view class="order_msg">
      <view class="msg_title"> 订单收入 </view>
      <view class="msg_item">
        <text class="item_left">
          <!-- {{ content.order_shouru.shouru_name }} -->
          配送费
        </text>
        <text class="item_right"> ￥{{ content.fee }} </text>
      </view>
    </view>
    <view class="order_msg">
      <view
        class="msg_title"
        style="display: flex; justify-content: space-between"
      >
        <text>要求送达</text>
        <text
          >{{
            content.delivery_time == 0
              ? getMinutes(content.pay_time * 1000 + default_time * 60 * 1000)
              : getMinutes(content.delivery_time * 1000)
          }}前</text
        >
      </view>
      <view class="time_line">
        <view class="line_item">
          <text class="time">{{
            content.rush_time == 0 ? "-" : getMinutes(content.rush_time * 1000)
          }}</text>
          <text class="time_to">抢单</text>
        </view>
        <view class="line_item">
          <text class="time">{{
            content.arrive_time == 0
              ? "-"
              : getMinutes(content.arrive_time * 1000)
          }}</text>
          <text class="time_to">到店</text>
        </view>

        <view class="line_item">
          <text class="time">{{
            content.confirm_time == 0
              ? "-"
              : getMinutes(content.confirm_time * 1000)
          }}</text>
          <text class="time_to">送达</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      default_time: "",
      isCancel: true,
      content: {},
    };
  },
  onLoad(option) {
    if (option.active && option.active == 1) {
      this.isCancel = false;
    }
    this.content = JSON.parse(decodeURIComponent(option.i));
    this.default_time =
      uni.getStorageSync("authData").local_setting.default_time.value;
  },
  methods: {
    toStoreLocation() {
      uni.openLocation({
        latitude: parseFloat(this.content.store_latitude),
        longitude: parseFloat(this.content.store_longitude),
        name: this.content.store_name,
        address: this.content.store_address,
      });
    },
    toUserLocation() {
      uni.openLocation({
        latitude: parseFloat(this.content.user_latitude),
        longitude: parseFloat(this.content.user_longitude),
        name: this.content.address,
      });
    },
    getDate(val) {
      var date = new Date(val);
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      let hour = date.getHours(); // 获取小时
      let minute = date.getMinutes(); // 获取分钟
      let second = date.getSeconds(); // 获取秒数
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      // var currentdate = year + seperator1 + month + seperator1 + strDate;
      var currentdate =
        year +
        seperator1 +
        month +
        seperator1 +
        strDate +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second;
      return currentdate;
    },
    getMinutes(val) {
      var date = new Date(val);
      let hour = date.getHours(); // 获取小时
      let minute = date.getMinutes(); // 获取分钟

      if (hour >= 1 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minute >= 0 && minute <= 9) {
        minute = "0" + minute;
      }
      return hour + ":" + minute;
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 24rpx;
  .status {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30rpx;
    .icon {
      width: 40rpx;
      height: 40rpx;
      border: 2rpx solid #262626;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .text {
      font-size: 40rpx;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #262626;
      margin-left: 20rpx;
    }
  }
  .room_c {
    width: 702rpx;
    // height: 328rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 0 auto;
    padding: 24rpx;
    .room {
      display: flex;
      justify-content: space-between;
      font-size: 30rpx;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #262626;
      margin-bottom: 24rpx;
    }
    .mook {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10rpx;
      .qu {
        width: 36rpx;
        height: 36rpx;
        background: #fe5f0f;
        border-radius: 120rpx 120rpx 120rpx 120rpx;
        border-radius: 50%;
        font-size: 22rpx;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 36rpx;
        text-align: center;
      }
      .mook_title {
        font-size: 32rpx;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #262626;
        margin-left: 30rpx;
      }
      .dingwei {
        width: 44rpx;
        height: 44rpx;
        background: #ffffff;
        border-radius: 50%;
        border: 2rpx solid #b6b6b6;
        line-height: 44rpx;
        text-align: center;
        margin-left: 84rpx;
      }
    }
    .user_ad {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      .juli {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 22rpx;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #262626;
      }
      .user_detail_ad {
        font-size: 26rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #8c8c8c;
        margin-left: 32rpx;
      }
    }
  }
  .order_msg {
    width: 702rpx;
    // height: 206rpx;
    background: #ffffff;
    border-radius: 20rpx;
    margin: 24rpx auto;
    padding: 24rpx;
    .msg_title {
      font-size: 30rpx;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #262626;
      // margin-bottom: 24rpx;
    }
    .msg_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 24rpx;
      .item_left {
        font-size: 26rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #262626;
      }
      .item_right {
        font-size: 26rpx;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #262626;
      }
    }
    .time_line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;
      .line_item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .time {
          font-size: 34rpx;
          font-family: PingFang SC-Semibold, PingFang SC;
          font-weight: 600;
          color: #8c8c8c;
        }
        .time_to {
          font-size: 24rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #262626;
        }
      }
    }
  }
}
</style>
